{% extends "base.html" %}

{% block subtitle %}
  Registration
{% endblock subtitle %}

{% block navbar_breadcrumb %}
  <ul class="nav navbar-nav oppia-navbar-breadcrumb">
    <li>
      <span class="oppia-navbar-breadcrumb-separator"></span>
      Registration
    </li>
  </ul>
{% endblock navbar_breadcrumb %}

{% block content %}
  <!-- NOTE: This page should not contain any direct anchors to internal links. If the user visits an internal
  link before completing the signup process, they will be logged out.
  -->

  <style>
    html, body {
      background-color: #eee;
    }
  </style>

  <div class="oppia-page-cards-container" ng-controller="Signup">
    <md-card class="oppia-page-card">
      <h2 class="oppia-page-title">Complete Your Registration</h2>

      <form ng-submit="submitPrerequisitesForm(agreedToTerms, username)">
        <div ng-show="!hasUsername" role="form">
          <div class="form-group">
            <label>Oppia username</label>
              <div>
                <input type="text" ng-model="username" id="username" class="form-control protractor-test-username-input" ng-blur="onUsernameInputFormBlur(username)" ng-change="updateWarningText(username)" ng-trim="false" focus-on="usernameInputField" style="max-width: 360px;">
              </div>
              <span class="help-block" style="font-size: smaller">
                Your username will be shown next to your contributions.
              </span>
              <div style="height: 18px; width: 550px;">
                <span style="color: red; font-size: 0.8em;" aria-live="assertive" ng-show="blurredAtLeastOnce">
                  <[warningText]>
                </span>
              </div>
          </div>
        </div>

        <hr>

        <p style="font-size: 1em;">
          The {{SITE_NAME}} site is an open commons of learning resources, and all material
          on it is freely reusable and shareable.
        </p>

        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="agreedToTerms" class="protractor-test-agree-to-terms-checkbox">
            I agree that any contributions I make to {{SITE_NAME}} are licensed under
            <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC-BY-SA v4.0</a>,
            with a waiver of the attribution (BY) requirement. I further agree that any images and files
            I upload to the site will also have licensing compatible with these terms.
            (<a ng-click="showLicenseExplanationModal()">Why CC-BY-SA?</a>)
          </label>
        </div>

        <br>

        <button type="submit" class="btn btn-success protractor-test-register-user" ng-disabled="warningText || !agreedToTerms">Submit and start contributing</button>
      </form>
    </md-card>
  </div>

  <script type="text/ng-template" id="modals/licenseExplanation">
    <div class="modal-header">
      <h3>Why CC-BY-SA?</h3>
    </div>

    <div class="modal-body">
      <p style="line-height: 1.5;">
        {{SITE_NAME}} exists to foster the creation and continual improvement
        of a set of high-quality learning resources that are freely available
        to anyone.
      </p>

      <p style="line-height: 1.5;">
        Using a
        <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC-BY-SA v4.0</a>
        license allows the content of explorations to be freely copied, reused,
        remixed and redistributed. The main condition is that if someone remixes,
        transforms or builds upon the material, they must also distribute their work under
        the same free license.
      </p>

      <p style="line-height: 1.5;">
        The waiver of the attribution (BY) requirement means that, if someone
        reuses this work, they are not required to attribute the authors.
        However, all of your individual contributions to explorations will be
        available on this site in the exploration change log, and people who
        reuse the exploration are encouraged (but not required) to include a
        link to this page.
      </p>
    </div>

    <div class="modal-footer">
      <button class="btn btn-default" ng-click="close()">Close</button>
    </div>
  </script>
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('/profile/Signup.js') }}
  </script>
{% endblock footer_js %}
